<template>
  <div class="head">
    <div
      v-for="(item, index) in list && list"
      :key="index"
      :class="carIndex === index ? 'active' : ''"
      @click="tab(index)"
    >
      <span>{{ item.name }}</span>
    </div>
  </div>
  <div
    v-for="(item, index) in list[carIndex] && list[carIndex].list"
    :key="index"
  >
    <img :src="item.img" alt="" />
    <span>{{ item.tit }}</span>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from "vue";
import axios from "axios";
export default {
  setup() {
    const state = reactive({
      list: [],
      carIndex: 0,
    });
    onMounted(() => {
      axios.get("/list").then((res) => {
        state.list = res.data;
      });
    });
    const tab = (index) => {
      state.carIndex = index;
    };
    return {
      ...toRefs(state),
      tab,
    };
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.active {
  background: red;
  color: #fff;
}
</style>